<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>患者诊治费</title>
    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <div th:replace="common :: #leftmenu"></div>

    <!-- main content start-->
    <div class="main-content" style="padding-top: 90px;">
        <div class="header-section">
            <div class="form-horizontal">
                <div class="form-group" style="margin-top: 10px;margin-bottom: 0px;padding-top: 10px;">
                    <label class="control-label col-md-3">选择日期</label>
                    <div class="col-md-4">
                        <div class="input-group input-large custom-date-range">
                            <input type="text" class="form-control dpd1" name="from" id="startTime"
                                   data-date-format="yyyy-mm-dd">
                            <span class="input-group-addon">至</span>
                            <input type="text" class="form-control dpd2" name="to" id="endTime"
                                   data-date-format="yyyy-mm-dd">
                        </div>
                        <span class="help-block">请选择一个日期范围</span>
                    </div>
                    <button class="btn btn-primary" onclick="getData()">查询</button>
                </div>
            </div>

        </div>
        <!--body wrapper start-->
        <div class="wrapper">
            <div th:class="row">
                <div class="col-sm-3">
                    <section class="panel">
                        <header class="panel-heading">
                            资产运营
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-12 p-states">
                                            <span class="state-title">医疗收入中药品收入比率  </span><i
                                                class="fa fa-question-circle" title="全院药品结算收入 / 全院结算总收入"></i>
                                            <h3 id="drugRate"></h3>
                                        </div>


                                    </div>

                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-12 p-states">
                                            <span class="state-title">医疗收入中医用材料收入比率  </span><i
                                                class="fa fa-question-circle" title="全院材料结算收入 / 全院结算总收入"></i>
                                            <h3 id="materialRate"></h3>
                                        </div>


                                    </div>

                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-12 p-states">
                                            <span class="state-title">门诊收入占医疗收入比例  </span><i
                                                class="fa fa-question-circle" title="门诊结算总收入 / 全院结算总收入"></i>
                                            <h3 id="outRate"></h3>
                                        </div>


                                    </div>

                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-12 p-states">
                                            <span class="state-title">住院收入占医疗收入比例  </span><i
                                                class="fa fa-question-circle" title="住院结算总收入 / 全院结算总收入"></i>
                                            <h3 id="inRate"></h3>
                                        </div>

                                    </div>

                                </div>
                            </div>

                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-12 p-states">
                                            <span class="state-title">门诊收入中来自医保基金的比例  </span><i
                                                class="fa fa-question-circle" title="门诊医保结算收入 / 门诊结算总收入"></i>
                                            <h3 id="outMedicalInsuranceRate"></h3>
                                        </div>


                                    </div>
                                </div>
                            </div>

                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">


                                        <div class="col-sm-12 p-states">
                                            <span class="state-title">住院收入中来自医保基金的比例  </span><i
                                                class="fa fa-question-circle" title="住院医保结算收入 / 住院结算总收入"></i>
                                            <h3 id="inMedicalInsuranceRate"></h3>
                                        </div>


                                    </div>
                                </div>
                            </div>

                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-12 p-states">
                                            <span class="state-title">医疗服务收入  </span><i class="fa fa-question-circle"
                                                                                        title="总收入 - 药品、耗材、检查检验收入"></i>
                                            <h3 id="treatmentIncome"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </section>
                </div>
                <div class="col-sm-9">
                    <section class="panel">
                        <header class="panel-heading">
                            全院收入一览
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                            <div id="pie1" style="height:600px;">
                                <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                            </div>
                        </div>
                    </section>
                </div>
            </div>

            <!--body wrapper end-->


        </div>
    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>


<script type="text/javascript">

    function getData() {
        let startTime = $('#startTime').val();
        let endTime = $('#endTime').val();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getAssetData",
            data: {"startTime": startTime, "endTime": endTime},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象

                if (result) {
                    $('#drugRate').text(toPercent(result.drugRate));
                    $('#materialRate').text(toPercent(result.materialRate));
                    $('#outRate').text(toPercent(result.outRate));

                    $('#inRate').text(toPercent(result.inRate));
                    $('#outMedicalInsuranceRate').text(toPercent(result.outMedicalInsuranceRate));
                    $('#inMedicalInsuranceRate').text(toPercent(result.inMedicalInsuranceRate));

                    $('#treatmentIncome').text(result.treatmentIncome.toFixed(2));
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("请求数据失败!" + JSON.parse(errorMsg));
            }
        });//end ajax


        let myChart = echarts.init(document.getElementById('pie1'));
        myChart.showLoading();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getHospitalAssetIncome",
            data: {"startTime": startTime, "endTime": endTime},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    //alert(JSON.stringify(result));
                    myChart.hideLoading();    //隐藏加载动画
                    const option = {
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                dataView: {
                                    show: true, readOnly: false, lang: ['数据视图', '关闭', '刷新'], title: '数据视图'
                                },
                                restore: {show: true, title: '刷新'},
                                saveAsImage: {show: true, title: '保存为图片'}
                            }
                        },
                        series: {
                            type: 'sunburst',
                            data: result,
                            radius: [0, '95%'],
                            sort: null,
                            emphasis: {
                                focus: 'ancestor'
                            },

                            levels: [{}, {
                                r0: '15%',
                                r: '35%',
                                itemStyle: {
                                    borderWidth: 2
                                },
                                label: {
                                    rotate: 'tangential'
                                }
                            }, {
                                r0: '35%',
                                r: '70%',
                                label: {
                                    align: 'right'
                                }
                            }, {
                                r0: '70%',
                                r: '72%',
                                label: {
                                    position: 'outside',
                                    padding: 3,
                                    silent: false
                                },
                                itemStyle: {
                                    borderWidth: 3
                                }
                            }]
                        }
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!" + errorMsg);
                myChart.hideLoading();
            }
        });//end ajax
    }

    $(document).ready(function () {
        $('#startTime').val(getDay(-30));
        $('#endTime').val(getDay(0));
        getData();
    });//刷新方法结束

</script>
</body>